/**
 * 房屋住户
 * @author truexin
 * @date   2016/06/12
 */

import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {

    var RC = r.createClass,
        ajax = lf.utils.ajax;

    var Person = RC({
        render: function () {
            var data = this.props.data;
            return (
                data.length == 0 ?
                    <p className="no-data">
                        暂无住户登记到您的家庭
                    </p>
                    :
                    <div className="person">
                        <img src={data.pic ? data.pic : "../public/images/finger/report.png"} alt="img"/>
                        <div>
                            <p>{data.name ? data.name : ' '}</p>
                            <p>{data.mobile ? data.mobile : ' '}</p>
                        </div>
                    </div>
            );
        }
    })
    var Panel = RC({
        getInitialState: function () {
            return ({
                list: [],
            })
        },
        componentWillMount: function () {
            var me = this;
            lf.bridgeJs.getUser(function (user) {
                if (user.houseId) {
                    ajax({
                        type: 'post',
                        data: {
                            houseId: user.houseId,
                        },
                        success: function (data) {
                            var data = data.dataList;
                            //var data = data.dataList = [];//用于没有住户情况
                            if (data.length == 0) {
                                var list = [<Person data={data} user={user}/>];
                            } else {
                                list = data.map(function (data) {
                                    return (
                                        <Person key={data.id} data={data}/>
                                    )
                                });
                            }
                            me.setState({
                                list: list
                            })

                        }.bind(me)
                    }, lf.finger.api.household.residentList);
                } else {
                    var houseId = '';
                    ajax({
                        type: 'get',
                        data: {
                            globalId: user.globalId,
                        },
                        success: function (data) {
                            houseId = data.dataList[0].houseId;
                        }
                    }, lf.finger.api.household.getHouseList)
                    ajax({
                        type: 'post',
                        data: {
                            houseId: houseId,
                        },
                        success: function (data) {
                            var data = data.dataList;
                            //var data = data.dataList = [];
                            if (data.length == 0) {
                                var list = [<Person data={data} user={user}/>];
                            } else {
                                list = data.map(function (data) {
                                    return (
                                        <Person key={data.id} data={data}/>
                                    )
                                });
                            }
                            me.setState({
                                list: list
                            })
                        }.bind(me)
                    }, lf.finger.api.household.residentList);
                }
            }.bind(me))
        },
        render: function () {
            return (
                <div className="panel">
                    <PullRefresh data={this.state.list}/>
                </div>
            );
        }
    });

    var Body = RC({
        render: function () {
            return (
                <div className="residents-page">
                    <Panel/>
                </div>
            );
        }
    });

    r.render(
        <Body />,
        document.getElementById('root'), function () {
            $('#root').css('background', '#efeff4');
            $('.mui-scroll').css({'background': '#efeff4'});
        }
    )

})(liefeng, React)
